<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>{$title}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="{$description}">
        <meta name="author" content="{$author}">

        <!-- Le styles -->
        <link href="../Public/css/bootstrap.min.css" rel="stylesheet">
        <link href="../Public/css/bootstrap-responsive.css" rel="stylesheet">
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

    </head>

    <body data-spy="scroll" data-target=".subnav" data-offset="50">

        <div class="container">

            <section id="forms">
                <div class="row">
                    <div class="span7">
                        <h3></h3>
                    </div>
                    <div class="span5">
                    </div>
                </div>
            </section>

            <section id="forms">
                <div class="navbar">
                    <div class="navbar-inner">
                        <div style="width: auto;" class="container">
                            <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
                                <span class="icon-bar"></span>

                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </a>
                            <a href="#" class="brand">去玩吗？</a>
                            <div class="nav-collapse">
                                <ul class="nav">
                                    <li class="active"><a href="#">Home</a></li>
                                    <li><a href="#">Link</a></li>

                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li class="dropdown">
                                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>

                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li class="nav-header">Nav header</li>
                                            <li><a href="#">Separated link</a></li>
                                            <li><a href="#">One more separated link</a></li>
                                        </ul>
                                    </li>

                                </ul>
                                <form action="" class="navbar-search pull-left">
                                    <input type="text" placeholder="Search" class="search-query span2">
                                </form>
                                <ul class="nav pull-right">
                                    <li><a href="#">Link</a></li>
                                    <li class="divider-vertical"></li>
                                    <li class="dropdown">

                                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>

                                        </ul>
                                    </li>
                                </ul>
                            </div><!-- /.nav-collapse -->
                        </div>
                    </div><!-- /navbar-inner -->
                </div>

                <div class="row">
                    <div class="span8">
                        <form class="form-horizontal">
                            <fieldset>
                                <legend>Form control states</legend>
                                <div class="control-group">
                                    <label for="focusedInput" class="control-label">Focused input</label>
                                    <div class="controls">
                                        <input type="text" value="This is focused…" id="focusedInput" class="input-xlarge focused">
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">Uneditable input</label>
                                    <div class="controls">
                                        <span class="input-xlarge uneditable-input">Some value here</span>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label for="disabledInput" class="control-label">Disabled input</label>
                                    <div class="controls">
                                        <input type="text" disabled="" placeholder="Disabled input here…" id="disabledInput" class="input-xlarge disabled">
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label for="optionsCheckbox2" class="control-label">Disabled checkbox</label>
                                    <div class="controls">
                                        <label class="checkbox">
                                            <input type="checkbox" disabled="" value="option1" id="optionsCheckbox2">
                                            This is a disabled checkbox
                                        </label>
                                    </div>
                                </div>
                                <div class="control-group warning">
                                    <label for="inputWarning" class="control-label">Input with warning</label>
                                    <div class="controls">
                                        <input type="text" id="inputWarning">
                                        <span class="help-inline">Something may have gone wrong</span>
                                    </div>
                                </div>
                                <div class="control-group error">
                                    <label for="inputError" class="control-label">Input with error</label>
                                    <div class="controls">
                                        <input type="text" id="inputError">
                                        <span class="help-inline">Please correct the error</span>
                                    </div>
                                </div>
                                <div class="control-group success">
                                    <label for="inputSuccess" class="control-label">Input with success</label>
                                    <div class="controls">
                                        <input type="text" id="inputSuccess">
                                        <span class="help-inline">Woohoo!</span>
                                    </div>
                                </div>
                                <div class="control-group success">
                                    <label for="selectError" class="control-label">Select with success</label>
                                    <div class="controls">
                                        <select id="selectError">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                        </select>
                                        <span class="help-inline">Woohoo!</span>
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <button class="btn btn-primary" type="submit">Save changes</button>
                                    <button class="btn">Cancel</button>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                    <div class="span4">
                        <h3>Redesigned browser states</h3>
                        <p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
                        <hr>
                        <h3>Form validation</h3>
                        <p>It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.</p>
                        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;fieldset</span></li><li class="L1"><span class="pln">  </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-group error"</span><span class="tag">&gt;</span></li><li class="L2"><span class="pln">  …</span></li><li class="L3"><span class="tag">&lt;/fieldset&gt;</span></li></ol></pre>
                    </div>
                </div>

            </section>

            <!-- Footer
             ================================================== -->
        <include file="Public:footer" />

        </div><!-- /container -->

    </body>
</html>
